<!-- 账单信息 -->
<template>
	<a-tabs v-model:activeKey="previewType" style="padding: 20px 16px; height: 100%" @change="changeTab">
		<template #rightExtra>
			<span v-if="query.beginTimeAt && query.endTimeAt">
				<span style="margin-right: 10px">(总账单{{ format(query.beginTimeAt) }}至{{ format(query.endTimeAt) }})</span>
				<CloseCircleOutlined @click="handleClearParams" />
			</span>
		</template>
		<a-tab-pane key="total">
			<template #tab>
				<span>总账单</span>
			</template>
			<total-bill-details v-if="previewType ==='total'" @changeParams="handleChangeParams" :enterContractId="props.id" />
		</a-tab-pane>
		<a-tab-pane key="item" class="enterprise-bill-tabs">
			<template #tab>
				<span>子账单</span>
			</template>
			<div>
				<a-input-group compact class="display-flex">
					<a-select v-model:value="query.houseId" v-bind="option" class="flex1" />

					<a-button @click="change('prev')" :disabled="[-1, 0].includes(currentIndex)">上一套</a-button>
					<a-button @click="change('next')" :disabled="[-1, option.options.length - 1].includes(currentIndex)">下一套</a-button>
				</a-input-group>
				<bill-tabs :isValid="null" :approvalStatus="props.approvalStatus" :type="props.type" :query="query" />
			</div>
		</a-tab-pane>
	</a-tabs>
</template>

<script setup lang="ts">
	import {onMounted, reactive, ref} from 'vue'
	import BillTabs from '@/components/finance/bill-tabs.vue'
	import {getRoomDetails} from '@/api/charter-contract'
	import XEUtils from 'xe-utils'
	import {CloseCircleOutlined} from '@ant-design/icons-vue'
	import totalBillDetails from './total-bill-details.vue'
	import Dayjs from 'dayjs'
	const props = defineProps<{
		id: string
		type: string | number
		approvalStatus?: string | number
	}>()

	const query = ref({
		houseId: null,
		beginTime: null,
		endTime: null,
		enterContractId: props.id
	})
	const format = date => Dayjs(date).format('YYYY-MM-DD')
	const previewType = ref('total')

	const roomData = reactive({
		enterPriseContractId: '',
		matchType: 1,
		like: null,
		current: 1,
		size: 15,
		approvalStatus: '-1'
	})

	const currentIndex = ref(-1)
	const changeTab = val => {
		if (val === 'total') {
			query.value = {
				houseId: null,
				beginTime: null,
				endTime: null,
				enterContractId: props.id
			}
		}
	}
	const option = reactive<any>({
		options: [],
		showSearch: true,
		allowClear: true,
		placeholder: '请输入房源地址进行搜索',
		optionFilterProp: 'address',
		fieldNames: {
			label: 'address',
			value: 'id'
		},
		onChange(value) {
			currentIndex.value = XEUtils.findIndexOf(option.options, item => item.id === value)
		}
	})

	onMounted(() => {
		query.value.enterContractId = props.id

		roomData.enterPriseContractId = props.id
		getRoomDetails(roomData).then((res: any) => {
			option.options = res.data
		})
	})

	const change = (action: string) => {
		if (action === 'prev') {
			query.value.houseId = option.options[currentIndex.value - 1]?.id
		} else {
			query.value.houseId = option.options[currentIndex.value + 1]?.id
		}

		option.onChange(query.value.houseId)
	}

	const handleChangeParams = params => {
		previewType.value = 'item'
		query.value.enterContractId = props.id
		query.value.beginTimeAt = format(params.beginTime)
		query.value.endTimeAt = format(params.endTime)
		query.value.predictTimeStart = format(params.predictTimeStart)
		query.value.predictTimeEnd = format(params.predictTimeEnd)
		query.value.keyIdList = params.keyIdList
	}
	const handleClearParams = () => {
		query.value = {
			houseId: null,
			enterContractId: props.id
		}
	}
</script>
<style lang="less" scoped>
	.enterprise-bill-tabs {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	/deep/ .vxe-grid {
		// height: 100%;
		height: 485px;
	}
</style>
